<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>绘制图形</title>
		<script src='js/jquery-1.11.1.js'></script>
		<script src='js/spectrum.js'></script>
		<script src='js/mice_graph.js'></script>
		<script src='js/mice_common.js'></script>
		<script src='js/jquery.json-2.4.js'></script>
		<link rel='stylesheet' href='css/spectrum.css' />
    </head>
	<style>
		body{
			font-size:12px;
		}
	</style>
	<script>
		////////////////////////变量定义///////////////////////
		// 过程点
    	var savePoint = null;
		// 选中图形后的8个定位点
		var selectedMap = new Map();
		// 临时定位点
		var tempPoint = null;
      	// 原点
		var basePoint = null;
		// 图形集合
		var graphs = new Array();
		// 标签集合
		var fonts = new Array();
		// 背景图片
		var bgImage = null;
		// 某操作中的图形点结合
		var graphItem = null;
		// 设置当前模式 绘制图形draw，选中selected，文字write，填充fill
		var model = 'selected';
		// 当前图形
		var currGraph = null;
		// 移动标志
		var moveMark = false;
		var zoomMark = false;
		var followMark = false;
		////////////////////////默认值定义///////////////////////
		// 默认线框颜色
		var defaultLineColor = 'black';
		// 默认线框宽度
		var defaultLineWidth = '1';
		// 默认填充颜色
		var defaultFillColor = 'white';
		// 选中图形线框颜色
		var defaultSelectedLineColor = 'red';
		// 默认标签字体
		var defaultFont = '14px sans-serif';
		// 赋予图形序号
		var graphNum = 0;
		// 赋予标签序号
		var fontNum = 0;
		////////////////////////画布基本设置//////////////////////
		var canvas = null;
		var canvas_bg = null;
		var ctx = null;
		var ctx_bg = null;
		$(document).ready(function(){
			// 赋值
			$("#fz").click(function(){
				var jsonGraphs = '[{"id":"G0","opt":{"fillColor":"#3cb4f6"},"points":[{"x":197,"y":107},{"x":157,"y":301},{"x":317,"y":298},{"x":354,"y":114},{"x":208,"y":115},{"x":197,"y":107}]},{"id":"G1","opt":{"fillColor":"#d4c135"},"points":[{"x":501,"y":136},{"x":433,"y":309},{"x":623,"y":304},{"x":501,"y":136}]}]';
				var jsonFonts = '[{"id":"T0","opt":null,"point":{"x":295,"y":145},"content":"测试测试"},{"id":"T1","opt":null,"point":{"x":441,"y":243},"content":"测试测试"},{"id":"T2","opt":null,"point":{"x":237,"y":313},"content":"测试测试"},{"id":"T3","opt":null,"point":{"x":597,"y":157},"content":"测试测试1"}]';
				var bg_image = 'bg.jpg';
				setGraphs(jsonGraphs);
				setLables(jsonFonts);
				drawBg(bg_image);
				setGraphColor('G0', '#FF0000');
			});
			////////////////////////画布基本设置//////////////////////
			canvas = $('#canvas').get(0);
			canvas_bg = $('#canvas_bg').get(0);
			ctx = canvas.getContext("2d");
			ctx_bg = canvas_bg.getContext("2d");
			ctx.lineWidth = defaultLineWidth;
			ctx.strokeStyle = defaultLineColor;
			canvas.addEventListener("mousemove", getMouseOverGraphId, false);
			////////////////////////画布操作方法//////////////////////
			// 鼠标移动
			function getMouseOverGraphId(){
				currGraph = getGraph(event);
				if(currGraph == null){
					$('#viewID').html();
				}else{
					$('#viewID').html('ID值为：'+currGraph.id);
				}
			}
			// 重新绘制
			function reDrawAll(){
				clearCanvas();
				drawAll();
			}
			// 绘制所有
			function drawAll(){
				// 绘制图形
				for(var k = 0;k < graphs.length;k++){
					var graph = graphs[k];
					if(currGraph != null && graph.id == currGraph.id){
						continue;
					}
					// 同一种设置，诸如线宽、颜色等要以beginPath开头
					ctx.beginPath();
					if(graph.opt == null){
						ctx.lineWidth = defaultLineWidth;
						ctx.strokeStyle = defaultLineColor;	
						ctx.fillStyle = defaultFillColor;
					}else {
						if(graph.opt.fillColor != null){
							ctx.fillStyle = graph.opt.fillColor;
						}else{
							ctx.fillStyle = defaultFillColor;
						}
						if(graph.opt.borderColor != null){
							ctx.strokeStyle = graph.opt.borderColor;
						}else{
							ctx.strokeStyle = defaultLineColor;
						}
						if(graph.opt.borderWidth != null){
							ctx.lineWidth = graph.opt.borderWidth;
						}else{
							ctx.lineWidth = defaultLineWidth;
						}
					}
					for(var i = 0;i < graph.points.length;i++){
						var tempPoint = graph.points[i];
						// 同时绘制多个图形的时候要使用moveTo
						if(i == 0){
							ctx.moveTo(tempPoint.x, tempPoint.y);
						}else{
							ctx.lineTo(tempPoint.x, tempPoint.y);
						}
					}
					ctx.closePath();
					ctx.fill();
					ctx.stroke();
				}
				// 绘制标签
				for(var k = 0;k < fonts.length;k++){
					var font = fonts[k];
					if(currGraph != null && font.id == currGraph.id){
						continue;
					}
					// 同一种设置，诸如线宽、颜色等要以beginPath开头
					ctx.beginPath();
					if(font.opt == null){
						ctx.fillStyle = defaultLineColor;	
						ctx.font = defaultFont;
					}else {
						if(font.opt.fontColor != null){
							ctx.fillStyle = font.opt.fontColor;
						}else{
							ctx.fillStyle = defaultLineColor;
						}
						if (font.opt.fontSize != null) {
							ctx.font = font.opt.fontSize;;
						}else{
							ctx.font = defaultFont;
						}
					}
					ctx.fillText(font.content, font.point.x, font.point.y);
					ctx.stroke();
				}
			}
			// 绘制背景
			function drawBg(imgPath){
				bgImage = imgPath;
				var image = new Image();
				image.src = imgPath;
				image.onload = function(){
					ctx_bg.drawImage(image,0,0,canvas_bg.width, canvas_bg.height);
				}
			} 
			// 设置图形
			function setGraphs(jsonGraphs){
				graphs = new Array();
				var tempGraphsObject = $.evalJSON(jsonGraphs);
				for(var i = 0;i < tempGraphsObject.length;i++){
					var obj = tempGraphsObject[i];
					graphs.push(new graph(obj.id, obj.opt, obj.points));
				}
				drawAll();
			}
			// 设置标签
			function setLables(jsonFonts){
				fonts = new Array();
				var tempFontsObject = $.evalJSON(jsonFonts);
				for(var i = 0;i < tempFontsObject.length;i++){
					var obj = tempFontsObject[i];
					fonts.push(new font(obj.id, obj.opt, obj.point, obj.content));
				}
				drawAll();
			}
			// 清空画布
			function clearCanvas(){
				ctx.clearRect(0, 0, canvas.width, canvas.height);
			}
			// 清空画布
			function clearBgCanvas(){
				ctx_bg.clearRect(0, 0, canvas_bg.width, canvas_bg.height);
			}
		});
    </script>
    <body>
    	<!--画布区域 不要通过style设置宽度和高度-->
		<div id="drawArea" style="position:relative">
        	<canvas id="canvas" width="900" height="500" style="position:absolute;left:0;top:0;border:1px solid #CCCCCC; z-index:2"></canvas>
			<canvas id="canvas_bg" width="900" height="500" style="position:absolute;left:0;top:0border:1px solid #CCCCCC; z-index:1"></canvas>
		</div>
		<div id="operArea" style="position:relative;top:510px;">
			<input id="fz" type="button" value="赋值" />
			<span id="viewID"></span>
		</div>
    </body>
</html>
